<template>
  <a-modal
    title="班级编辑"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item style="display: none;" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item label="所属园区" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <span>{{ this.gardenHouseInfo1.gardenName }}</span>
        </a-form-item>

        <a-form-item label="班级名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入班级名称"
            v-decorator="['name', { rules: [{ required: true, message: '请输入班级名称！' }] }]"
          />
        </a-form-item>

        <a-form-item label="开班时间" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-date-picker
            class="fullwidth"
            :format="dateFormat"
            :valueFormat="dateFormat"
            v-decorator="['openTime', { rules: [{ required: false, message: '请选择开班时间！' }] }]"
          />
        </a-form-item>

        <a-form-item label="教师" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-select
            mode="multiple"
            showSearch
            optionFilterProp="children"
            allowClear
            v-decorator="['teacherIds', { rules: [{ required: true, message: '至少选择一位教师！' }] }]"
          >
            <a-select-option v-for="item in teacherList1" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="保育员" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-select
            mode="multiple"
            showSearch
            optionFilterProp="children"
            allowClear
            v-decorator="['nurseIds', { rules: [{ required: false, message: '请选择保育员！' }] }]"
          >
            <a-select-option v-for="item in nurseList1" :key="item.id" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="所在教室" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-select allowClear v-decorator="['classroomId', { rules: [{ required: true, message: '请选择教室！' }] }]">
            <a-select-option v-for="item in classroom1" :key="item.id" :value="item.id">{{
              item.cRoomName
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { sysPosEdit } from '@/api/modular/garden/classManage'
import moment from 'moment'

export default {
  props: {
    teacherList: { type: Array },
    nurseList: { type: Array },
    classroom: { type: Array },
    gardenHouseInfo: { type: Object }
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      teacherList1: [],
      nurseList1: [],
      classroom1: [],
      classroomName: '',
      gardenHouseInfo1: {},
      dateFormat: 'YYYY-MM-DD'
    }
  },
  methods: {
    // 初始化方法
    edit(record) {
      this.gardenHouseInfo1 = this.gardenHouseInfo
      this.nurseList1 = this.nurseList
      this.teacherList1 = this.teacherList
      this.classroom1 = this.classroom
      this.visible = true
      this.classroomName = record.classroomName
      setTimeout(() => {
        this.form.setFieldsValue({
          id: record.id,
          name: record.name,
          code: record.code,
          sort: record.sort,
          teacherIds: record.teacherIds.split(','),
          nurseIds: record.nurseIds.split(','),
          classroomId: record.classroomId
        })
        this.form.getFieldDecorator('openTime', { initialValue: moment(record.openTime, 'YYYY-MM-DD') })
      }, 100)
    },

    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values['gardenId'] = this.gardenHouseInfo1.id
          values['gardenName'] = this.gardenHouseInfo1.gardenName
          values['classroomName'] = this.classroomName
          values['teacherIds'] = values['teacherIds'].join(',')
          values['nurseIds'] = values['nurseIds'].join(',')
          values['openTime'] = moment(values.openTime).format('YYYY-MM-DD')
          sysPosEdit(values)
            .then(res => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
